.disable {
    display: none !important;
  }
  
  .cancel-box-pidgree{
    width: fit-content !important;
  }
  .cancel-box {
    max-width: 522px; 
    background-color: #fff;
    padding: 30px !important;
    position: relative;
    overflow: hidden;
    border-radius: 15.65px;
    background: var(--base-white, #FFF);
    box-shadow: 0px 10.43333px 10.43333px -5.21667px rgba(16, 24, 40, 0.03), 0px 26.08333px 31.3px -5.21667px rgba(16, 24, 40, 0.08);
    max-height: fit-content;
  }
    .cancel-box-head-icon-item {
    display: flex;
    width: 62.6px;
    height: 62.6px;
    justify-content: center;
    align-items: center;
    border-radius: 36.517px;
    border: 10.433px solid var(--warning-50, #FFFAEB);
    background: var(--warning-100, #FEF0C7);
  }
  .cancel-box-head-exit-item {
    display: flex;
    width: 62.6px;
    height: 62.6px;
    justify-content: center;
    align-items: center;
  }
  .cancel-box-head-icon-item-outline {
    position: absolute;
    width: 268px;
    top: -30px;
    left: -27px;



    top: -45px;
    left: -29px;
  }
  .pop-pidgree img{
    max-width: 100%;
  }
  
  .cancel-box-head-exit  {
    display: flex;
    justify-content: flex-end;
  }
  .cancel-box-head-exit-item {
    display: flex;
    width: 62.6px;
    height: 62.6px;
    justify-content: center;
    align-items: center;
    max-width: fit-content;
    display: flex;
    padding: 13.042px;
    justify-content: center;
    align-items: center;
  }
  .cancel-box-head-exit-item-svg {
    cursor: pointer;
    margin-bottom: 30px;
    padding: 3px;
  }
  .cancel-box-head-exit-item-svg:hover {
    background: #D9D9D930;
    border-radius: 50%;
   
  }
  
  .cancel-box-body  {
    margin-bottom: 41px !important;
    margin-top: 18px !important;
    display: flex;
    gap: 5px;
  }
  
  .cancel-box-body-title  {
    color: var(--gray-900, #101828); 
    font-size: 24px;
    font-style: normal;
    font-weight: 600;
    line-height: 36.517px;
    margin-bottom: 23px !important
  }
  
  .cancel-box-body-text  {
    color: var(--gray-600, #475467);
    font-family: Plus Jakarta Sans;
    font-size: 19.4px;
    font-style: normal;
    font-weight: 400;
    line-height: 33.083px;
  }
  .cancel-box-footer {
    display: flex;
    justify-content: space-between;
  }
  .cancel-box-footer-btn{
    max-width: fit-content;
  }
  .cancel-box-footer-btn-item {
    text-transform: capitalize;
    display: flex;
    padding: 13.042px 23.475px;
    justify-content: center;
    align-items: center;
    gap: 10.433px;
    width: 220px;
    flex: 1 0 0;
    color: var(--gray-700, #344054);
    font-family: Plus Jakarta Sans;
    font-size: 20.867px;
    font-style: normal;
    font-weight: 600;
    line-height: 31.3px;
    cursor: pointer;
    border-radius: 10.433px;
    border: 1.5px solid var(--gray-300, #D0D5DD);
    background: var(--base-white, #FFF);
    box-shadow: 0px 1.30417px 2.60833px 0px rgba(16, 24, 40, 0.05);
  }
  .cancel-box-footer-btn-confirm{
    border: none;
  }
  
  
  .primairy-color{
    background-color: #2C7BD8;
    color: var(--base-white, #FFF);
  }
  .primairy-color:hover{
    background-color: #2376D7;
  
  }
  
  .with-color{
  
  }
  .with-color:hover{
  border-radius: 10.433px;
  border: 2px solid #344054;
  background: var(--base-white, #FFF);
  box-shadow: 0px 1.30417px 2.60833px 0px rgba(16, 24, 40, 0.05);
  }
  .cancel-box-footer.col-12.row.p-0.m-0 {
  height: 60px;
  }
  .cancel-box-body-title {
  color: var(--gray-900, #101828);
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 36.517px;
  max-width: 509px;
  }
   
  .red-color{ 
  background: #FDE8E5;
  color: #D92D20;
  }
  .red-color:hover{ 
  background: #D92D20;
  color: #FDE8E5;
  }
  .yallow-color{ 
  background: #FFF6DC;
  color: #E78B18;
  }
  .yallow-color:hover{ 
  background: #E78B18;
  color:  #FFF6DC;
  }
  .primairy-color{
  background-color: #2C7BD8;
  color: var(--base-white, #FFF);
  }
  .primairy-color:hover{
  background-color: #2376D7;
  
  }
  .pink-color{
  background: #EDE5FD;
  color:  #6941C6;; 
  }
  .pink-color:hover{
  background: #6941C6;
  color:  #EDE5FD; 
  }
  
  #delete_box .cancel-box-head-icon-item { 
  border-radius: 36.517px;
  border: 10.433px solid #FFF7F6;
  background: #FEE4E2;


  margin-top: -18px;
  }
  .cancel-box-head-icon-item {   
    margin-top: -18px;
    }
    














  
@media (min-width: 578px) {



  .cancel-box  {
    padding: 30px !important; 
    max-width: 560px;
    min-width: 560px;
    margin: 0 auto !important;
  }
  
  }